<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="人物标签表"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="id"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary"
          v-auth="'novel.tag.create'"
          :icon="CirclePlus"
          @click="openAddEdit('新增人物标签表')"
        >
          新增
        </el-button>
        <el-button
          v-auth="'novel.tag.remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
<!--        <el-button-->
<!--          v-auth="'novel.tag.import'"-->
<!--          type="primary"-->
<!--          :icon="Upload"-->
<!--          plain-->
<!--          @click="importData"-->
<!--        >-->
<!--          导入-->
<!--        </el-button>-->
<!--        <el-button-->
<!--          v-auth="'novel.tag.export'"-->
<!--          type="primary"-->
<!--          :icon="Download"-->
<!--          plain-->
<!--          @click="downloadFile"-->
<!--        >-->
<!--          导出-->
<!--        </el-button>-->
      </template>
      <template #operation="{ row }">
        <el-button
          v-auth="'novel.tag.update'"
          type="primary"
          link
          :icon="EditPen"
          @click="openAddEdit('编辑人物标签表', row, false)"
        >
          编辑
        </el-button>
        <el-button
            v-auth="'novel.tag.remove'"
          type="primary"
          link
          :icon="Delete"
          @click="deleteInfo(row)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <ChararterTagForm ref="chararterTagRef" />
    <ImportExcel ref="ImportExcelRef" />
  </div>
</template>

<script setup lang="tsx">
import {h, ref} from 'vue'
import {
  CirclePlus,
  Delete,
  EditPen
} from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import {
  createChararterTagApi,
  removeChararterTagApi,
  updateChararterTagApi,
  getChararterTagListApi,
  getChararterTagDetailApi,
  importChararterTagExcelApi,
  exportChararterTagExcelApi,
} from '@/api/modules/novel/chararterTag';
import { useHandleData } from '@/hooks/useHandleData';
import ChararterTagForm from '@/views/novel/tag/components/test.vue';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import type { ChararterTagQuery, ChararterTagRow } from '@/api/types/novel/chararterTag';
import ImportExcel from '@/components/ImportExcel/index.vue';
import { downloadTemplate } from '@/api/modules/system/common';
import { useDownload } from "@/hooks/useDownload";
import { useDictOptions } from "@/hooks/useDictOptions";
import onSelectColor from "@/views/novel/tag/components/Children/onSelectColor.vue";
import tagTest from "@/views/novel/tag/components/Children/tagTest.vue";

defineOptions({
  name: 'ChararterTagView'
})

const proTableRef = ref<ProTableInstance>();
// 表格配置项   unref该方法会影响到useDictOptions方法的返回指针，若去除tagType，searchColumns的对象就会不一致 unref定义为去壳方法
const columns: ColumnProps<ChararterTagRow>[] = [
  { type: 'selection', width: 80 },
  // { prop: 'color',
  //   label: '颜色',
  //   tag: true,
  //   enum: useDictOptions('tagColor'),
  //   tagStyleProps: { //有就覆盖，没有就默认
  //     fontSize : '16px'
  //   }
  // },
  // { prop: 'colorCode', label: '颜色网页码' },
  { prop: 'describe',
    label: '标签文本',
    render: (params: any) => {
      return h(tagTest, {
        text: params.row.describe,
        totalColor : params.row.color,
        describe : params.row.remark,
        fontSize: '16px'
      })
    },},
  { prop: 'remark', label: '备注' },
  {
    prop: 'tagType',
    label: '标签类型',
    enum: useDictOptions('tagType'),
    fieldNames: {
      label: 'codeName',
      value: 'id',
      tagType: 'callbackShowStyle'
    }
  },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

const userOptions = useDictOptions('tagType');


// 搜索条件项
const searchColumns: SearchProps[] = [
  {
    prop: 'color',
    label: '颜色',
    el: 'input',
    render: (params: any) => {
      return h(onSelectColor, {
        id: 'tagColorOut',
        modelValue: params.modelValue,
        'onUpdate:modelValue': params['onUpdate:modelValue'],
        placeholder: '点击选择颜色'
      });
    },
  },
  // { prop: 'colorCode', label: '颜色网页码', el: 'input' },
  { prop: 'describe', label: '标签文本', el: 'input' },
  // { prop: 'tagType', label: '标签类型', el: 'select' },
  {
    prop: 'tagType',
    label: '标签类型',
    el: 'select',
    enum: useDictOptions('tagType'),
    fieldNames: {
      label: 'codeName',
      value: 'id',
      tagType: 'callbackShowStyle'
    }
  }
]


// 获取table列表
const getTableList = (params: ChararterTagQuery) => {
  let newParams = formatParams(params);
  return getChararterTagListApi(newParams);
};


const formatParams = (params: ChararterTagQuery) =>{
  let newParams = JSON.parse(JSON.stringify(params));
  if(newParams.createTime) {
    newParams.createTimeStart = newParams.createTime[0];
    newParams.createTimeEnd = newParams.createTime[1];
    delete newParams.createTime;
  }

  if(newParams.updateTime) {
    newParams.updateTimeStart = newParams.updateTime[0];
    newParams.updateTimeEnd = newParams.updateTime[1];
    delete newParams.updateTime;
  }

  return newParams;
}
// 打开 drawer(新增、查看、编辑)
const chararterTagRef = ref<InstanceType<typeof ChararterTagForm>>()
const openAddEdit = async(title: string, row: any = {}, isAdd = true) => {
  if (!isAdd) {
    const record = await getChararterTagDetailApi({ id: row?.id })
    row = record?.data
  }
  const params = {
    title,
    row: { ...row },
    api: isAdd ? createChararterTagApi : updateChararterTagApi,
    getTableList: proTableRef.value?.getTableList
  }
  chararterTagRef.value?.acceptParams(params)
}
// 删除信息
const deleteInfo = async (params: ChararterTagRow) => {
  await useHandleData(
    removeChararterTagApi,
    { ids: [params.id] },
    `删除【${params.id}】人物标签表`
  )
  proTableRef.value?.getTableList()
}
// 批量删除信息
const batchDelete = async (ids: (string | number)[]) => {
  await useHandleData(removeChararterTagApi, { ids }, '删除所选人物标签表')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}
// 导入
const ImportExcelRef = ref<InstanceType<typeof ImportExcel>>()
const importData = () => {
  const params = {
    title: '人物标签表',
    templateName: '人物标签表',
    tempApi: downloadTemplate,
    importApi: importChararterTagExcelApi,
    getTableList: proTableRef.value?.getTableList
  }
  ImportExcelRef.value?.acceptParams(params)
}
// 导出
const downloadFile = async () => {
  let newParams = formatParams(proTableRef.value?.searchParam as ChararterTagQuery);
  useDownload(exportChararterTagExcelApi, "人物标签表", newParams);
};
</script>